<template>
	<view class="goods_list">
		<goods-list :hotGoots="hotGoots"></goods-list>
		<view class="goods_none" v-if="flag">
			---没有更多了---
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		components: {
			"goods-list":goodsList
		},
		data() {
			return {
				hotGoots:[],
				pagenum: 1,
				flag: false
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		// 下拉触底刷新 一次刷新10条数据
		// 思路 如果 数据的长度< 请求的页码数*10  证明没有请求回来数据  所以没有数据, 展示到底了
		onReachBottom() {
			if ( this.hotGoots.length < this.pagenum * 10 ) return this.flag = true
			this.pagenum++
			this.getGoodsList()
		},
		// 上拉刷新事件
		onPullDownRefresh() {
			// console.log('xia la shua xin')
			this.pagenum = 1
			this.hotGoots = []
			this.flag = false
			// 关闭下拉刷新, 关键是什么时候去调用它
			setTimeout(() => {
				// 通过回调函数把 关闭下拉刷新的 事件传过去
				this.getGoodsList(() =>{
					uni.stopPullDownRefresh()
				})
			},1000)
			
		},
		methods: {
			// 页面加载 请求 商品列表的数据
			async getGoodsList(callBack) {
				const res = await this.$http({
					url: '/api/getgoods?pageindex=' + this.pagenum
				})
				// 原数据+ 请求回来的数据
				this.hotGoots = [...this.hotGoots , ...res.data.message]
				// 如果没有下拉刷新就不会触发这个  下拉刷新了 才会有 回调函数传过来
				// 这里的callback && callback(data);相当于 if callback {callback()};
				callBack && callBack()
			}
			
			
		}
	}
</script>

<style lang="scss">
	.goods_list {
		background-color: #ccc;
	}
	.goods_none {
		width: 750rpx;
		height: 50px;
		line-height: 50px;
		color: #fff;
		text-align: center;
	}
   
</style>
